<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../common/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../common/js/bootstrap-3.3.7-dist/css/bootstrap-datatimepicker.4.14.47.min.css" />
		
		<link rel="stylesheet" type="text/css" href="../../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../../css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/manager.css"/>
		
		<script src="../../../common/js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script ssrc="../../../common/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"  type="text/javascript" charset="utf-8"></script>
		<script src="../../../common/js/bootstrap-3.3.7-dist/js/moment-with-locales.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../common/js/bootstrap-3.3.7-dist/js/bootstrap-datatimepicker.4.14.47.js" type="text/javascript" charset="utf-8"></script>
		
		<!--画图插件-->
		<script src="../../js/Chart.addTest.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="main">
				<div id="header">
					<a id="headImg" href="MyInte.html"><img class="headImg" src="../../images/12.png" /></a>
					<p id="headTitle" style="font-size: 16px;">我的积分</p>
				</div>
				<div id="content">
					<div class="topInte" >
						<p style=""><img  src="./images/jifen.png"/>我的积分数：<span>6345</span></p>
						<p>每一分积累，都见证成长！</p>
					</div>
					<div style="padding-top: 0.5rem;">
						<div style="padding-left: 0.2rem;height: 6vh;font-size: 0.416666rem!important;margin-bottom: 0.3rem;">
							<span style="float: left;height: 6vh;line-height: 6vh; font-size: 0.38rem;">时间：</span> 
							<div class="form-group" style="float: left;width: 3.5rem;margin-top: 8px;">  
					            <div class="input-group date" id='date1'>  
					                <input type="text" unselectable="on"  class="form-control" style="height: 0.65rem;">  
					                <span class="input-group-addon"  style="height: 0.555555rem;padding: 0;">  
					                    <i style="color: #e93340;height: 0.416666rem;" class="glyphicon glyphicon-calendar"></i>  
					                </span>  
					            </div>  
					        </div>
					        <span style="color: #e93340;float: left;height: 6vh;line-height: 6vh;margin: 0 0.3rem;">—</span>
					        <div class="form-group" style="float: left;width: 3.5rem;margin-top: 8px;">  
					            <div class="input-group date" id='date2'>  
					                <input type="text" class="form-control" style="height: 0.65rem;">  
					                <span class="input-group-addon" style="height: 0.555555rem;padding: 0;">  
					                    <i style="color: #e93340;height: 0.416666rem;" class="glyphicon glyphicon-calendar"></i>  
					                </span>  
					            </div>  
					        </div>
							
						</div>
						<p  class="titleInte" >奖分统计图</p>
						<div class="jifenBox " style="padding-left: 0.5rem;">
							<p  >统计维度</p>
							<div class="jifenContent">
							<p>
								<div style="background-color: #ad6f6d;"></div>
								<a href="./jichuIntegral.html"><span >基础积分：<label>1234</label> </span></a> 
							</p>
							<p>
								<div style="background-color: #6eaead;"></div>
								 <a href="./kaoqinIntegral.html"><span>考勤积分：<label>2000</label> </span></a> 
							</p>
							<p>
								<div style=" background-color:#706fac;"></div>
								<a href="./xingdongIntegral.html"><span>行动积分：<label>3111</label> </span></a> 
							</p>
							</div>	

							
						</div>
						<div style="text-align: center;">
							<canvas id="canvas" height="175" width="175" style="margin: 0 auto;"></canvas>
							<canvas id="canvas1" height="175" width="175" style="margin: 0 auto;"></canvas>
							<canvas id="canvas2" height="175" width="175" style="margin: 0 auto;"></canvas>
							
						</div>
					</div>
					
					
					
				</div>
			</div>
			<div id="foot" class="row">
				<a class="foot col-xs-3 col-sm-3" href="../kaoqin/index2.html">
					<img class="footImg" src="../../images/guanlixuanzhong.png" />
					<p>管理</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../coalition/colalition.html">
					<img class="footImg" src="../../images/lianmengchushi.png" />
					<p>联盟</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../store/store.html">
					<img class="footImg" src="../../images/11.png" />
					<p>商城</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../personage/personIndex.html">
					<img class="footImg" src="../../images/13.png" />
					<p>我的</p>
				</a>
			</div>
		</div>

	</body>
	<script src="../../js/handlebars-v2.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/rhAdmin.js" type="text/javascript" charset="utf-8"></script>
	
	
	<script type="text/javascript">
	    var bool = false;
	    var bool1 = true;
	    var bool2 = true;
	    
		$(function() {
			var pieData = [
				{
					value: 1000,
					color:"#ad6f6d"
					,text: "18.8%"
				},
				{
					value : 1221,
					color : "#6eaead"
					,text: "22.7%"
				},
				{
					value : 3111,
					color : "#706fac"
					,text: "58.5%"
				}
			
			];
			var pieData1 = [
				{
					value: 100,
					color:"#ad6f6d"
					,text: "10%"
				},
				{
					value : 800,
					color : "#6eaead"
					,text: "80%"
				},
				{
					value : 100,
					color : "#706fac"
					,text: "10%"
				}
			
			];
			
			var pieData2 = [
				{
					value: 300,
					color:"#ad6f6d"
					,text: "30%"
				},
				{
					value : 400,
					color : "#6eaead"
					,text: "40%"
				},
				{
					value : 300,
					color : "#706fac"
					,text: "30%"
				}
			
			];
			
	var canvas = document.getElementById("canvas");
	var myPie = new Chart(canvas.getContext("2d")).Pie(pieData);
	$('#canvas').css('display','block')
		$('.jichu').html('111')
		$('.kaoqin').html('111')
		$('.xingdong').html('111')
		$('#canvas1').css('display','none')
		$('#canvas2').css('display','none')
	$("#date1").click(function(){
		if(!bool1  && !bool2){
			window.location.reload()
		}
		if(bool1){
		bool1 = false;
		$('.jichu').html('100')
		$('.kaoqin').html('800')
		$('.xingdong').html('100')
		$('#canvas').css('display','none')
		$('#canvas1').css('display','block')
		$('#canvas2').css('display','none')
		canvas = document.getElementById("canvas1");
		myPie = new Chart(canvas.getContext("2d")).Pie(pieData1);
		}
		
		
	})
	
	$("#date2").click(function(){
		if(!bool1  && !bool2){
			window.location.reload()
		}
		if(bool2){
			bool2 = false;
			$('.jichu').html('300')
		$('.kaoqin').html('400')
		$('.xingdong').html('300')
		$('#canvas').css('display','none')
		$('#canvas1').css('display','none')
		$('#canvas2').css('display','block')
		canvas = document.getElementById("canvas2");
		myPie = new Chart(canvas.getContext("2d")).Pie(pieData2);
		}
		
	})
	
	
			<!--http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning  参数详解-->
		    $('#date1').datetimepicker({  
		        format: 'YYYY-MM-DD ',  
		        locale: moment.locale('zh-cn'),
		        showTodayButton:true,
		        showClose:true,
		        minDate:'2017-10-01',
		        maxDate:'2018-10-31',
		        date:'2017-10-25',
		        widgetPositioning:{
		        	horizontal: 'left',
            		vertical: 'bottom'
		        }
		    });
		     $('#date2').datetimepicker({  
		        format: 'YYYY-MM-DD ',  
		        locale: moment.locale('zh-cn'),
		        showTodayButton:true,
		        showClose:true,
		        minDate:'2017-10-01',
		        maxDate:'2018-10-31',
		        date:'2017-10-25',
		        widgetPositioning:{
		        	horizontal: 'right',
            		vertical: 'bottom'
		        }
		    });


	


//			$.ajax({
//				type: "get",
//				url: "http://47.104.13.109/mall-service/areapic/search",
//				async: true,
//				data: {
//					"areaId": "1"
//				},
//				success: function(data) {
//					console.log(data);
//					$('.tabDiv li:nth-child(1) img').attr("src", data.pic1);
//				}
//			});
			
		})


	</script>

</html>